<template>
	<view class="login-box">
		<nav-bar :title="i18n.login.title" rightIcon="service" @_back="_back" @rightClick="rightClick">
			<template slot="customRight">
				<text class="language-text" @click="region_show = true">{{i18n.set.language}}</text>
				<dropdown width="160rpx" position="right" v-show="region_show" :Top="46" :list="list"
					@select="selectBusiness" @close="region_show = false"></dropdown>
			</template>
		</nav-bar>
		<view class="login-logo main-bg text-align">
			<text>logo</text>
		</view>
		<view class="login-box-container">
			<tabs :list="navList" :fontSize="32" @click="navClick"></tabs>
			<custom-input icon="email" v-model="info.username" :placehold="i18n.login.enterAccount" v-if="!navCurrent">
			</custom-input>
			<custom-input :iconWidth="22" v-model="info.username" isRegion :placehold="i18n.login.enterphone" v-else
				@prefix="prefix"></custom-input>
			<custom-input icon="password" isPwd v-model="info.password" :placehold="i18n.login.enterPassword">
			</custom-input>
			<custom-submit class="login-submit" :loading="loading" :title="i18n.login.title" @click="submit">
			</custom-submit>
			<view class="forget-box">
				<text @click="gotoRegister">{{i18n.login.register}}</text>
				<text @click="gotoForget">{{i18n.login.forgetPassword}}</text>
			</view>
			<view class="service-box" @click="rightClick">
				<image style="width: 32rpx;margin-right: 14rpx;" src="../../static/images/icon/service.png"
					mode="widthFix"></image>
				{{i18n.login.service}}
			</view>
		</view>
		<tips-popup ref="tips"></tips-popup>
	</view>
</template>

<script>
	import minix from './mixins/index.js'
	import TipsPopup from '@/components/TipsPopup/index.vue'
	import Tabs from '@/components/Tabs/index.vue'
	import Dropdown from '@/components/dropdown/index.vue'
	import {
		Toast
	} from '@/utils/util.js'
	export default {
		mixins: [minix],
		components: {
			TipsPopup,
			Tabs,
			Dropdown
		},
		data() {
			return {
				navCurrent: 0,
				info: {
					prefix: '+86',
					logintype: 1
				},
				loading: false,
				region_show: false,
			}
		},
		computed: {
			i18n() {
				return this.$t('message');
			},
			navList() {
				return [{
						title: this.$t('message').login.emai,
						id: 0
					},
					{
						title: this.$t('message').login.phone,
						id: 1
					},
				]
			},
			list() {
				return [{
						title: this.$t('message').set.chinese,
						value: 'zh-CN',
					},
					{
						title: this.$t('message').set.english,
						value: 'en-US',
					},
					{
						title: this.$t('message').set.tradition,
						value: 'zh-HK',
					},
				]
			}
		},
		methods: {
			navClick(val) {
				this.navCurrent = val.id;
			},
			gotoRegister() {
				uni.navigateTo({
					url: '/pages/login/register'
				})
			},
			gotoForget() {
				uni.navigateTo({
					url: '/pages/login/forgetpsw'
				})
			},
			prefix(val) {
				this.info.prefix = val;
			},
			async submit() {
				if (!this.navCurrent && !this.info.username) return Toast(this.i18n.login.enterAccount);
				if (this.navCurrent && !this.info.username) return Toast(this.i18n.login.enterphone);
				if (!this.info.password) return Toast(this.i18n.login.enterPassword);
				this.info.logintype = !this.navCurrent ? 1 : 0;
				this.loading = true;
				let { data } = await this.$store.dispatch('user/login', this.info);
				if (!data) {
					this.$refs.tips.open('fall', this.i18n.common.loginFailed, this.i18n.login.loginAgain)
					this.loading = false;
					return;
				}
				this.$store.dispatch('user/getInfo').catch(() => {
					this.$store.dispatch('user/logout')
				});
				this.$store.dispatch('wallet/getWalletList');
				this.$store.dispatch('wallet/getbalancesList');
				await Toast(this.i18n.common.loginSuccess);
				this.loading = false;
				uni.switchTab({
					url: '/pages/index/index'
				})
				// this.$store.dispatch('user/login', this.info).then(() => {
				// 	// this.$refs.tips.open('success', this.i18n.common.loginSuccess, this.i18n.common.confirm)
				// 	this.$store.dispatch('user/getInfo').catch(() => {
				// 		this.$store.dispatch('user/logout')
				// 	});
				// 	this.$store.dispatch('wallet/getWalletList');
				// 	this.$store.dispatch('wallet/getbalancesList');
				// 	this.$u.toast(this.i18n.common.loginSuccess);
				// 	this.loading = false;
				// 	uni.switchTab({
				// 		url: '/pages/index/index'
				// 	})
				// }).catch((error) => {
				// 	this.$refs.tips.open('fall', this.i18n.common.loginFailed, this.i18n.login.loginAgain)
				// 	this.loading = false;
				// })
			},
			_back() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			rightClick() {
				uni.navigateTo({
					url: '/pages/set/service'
				})
			},
			selectBusiness(val) {
				// console.log(val);
				let _this = this;
				uni.setStorageSync('select', val.value);
				_this.$store.commit('set/SET_LANGUAGE', val.value)
				_this.$i18n.locale = val.value;
				_this.region_show = false;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.login-box {
		color: rgba(255, 255, 255, .4);

		.login-logo {
			width: 160rpx;
			height: 160rpx;
			line-height: 160rpx;
			border-radius: 50%;
			margin: 60rpx auto 100rpx;
			font-size: 30rpx;
			color: #fff;
		}

		.login-box-container {
			width: 630rpx;
			margin: 0 auto;

			.login-submit {
				margin-top: 120rpx;
				margin-bottom: 30rpx;
			}

			.forget-box {
				display: flex;
				justify-content: space-between;
				font-size: 28rpx;
			}
		}

		.language-text {
			font-size: 30rpx;
		}

		.service-box {
			display: flex;
			height: 32rpx;
			font-size: 28rpx;
			align-items: center;
			margin-top: 78rpx;
			color: rgba(255, 255, 255, .54);
			justify-content: center;
		}
	}
</style>
